<template>
  <el-card class="good-container">
    <template #header>
      <div class="header">
        <el-button type="primary" :icon="Plus" @click="handleAdd">增加</el-button>

      </div>
    </template>

    <el-table
        :load="state.loading"
        :data="state.tableData"
        tooltip-effect="dark"
        style="width: 100%"
    >
      <el-table-column
          prop="goodsId"
          label="商品编号"
      />
      <el-table-column
          prop="seckillPrice"
          label="秒杀价格"
      />
      <el-table-column
          prop="seckillNum"
          label="秒杀数量"
      />
      <el-table-column
          prop="seckillStatus"
          label="秒杀状态"
      />
      <el-table-column
          prop="seckillBegin"
          label="开始时间"
      />
      <el-table-column
          prop="seckillEnd"
          label="结束时间"
      />
      <el-table-column
          prop="seckillRank"
          label="排序"
      />

      <el-table-column
          prop="createTime"
          label="创建时间 "
      />

      <el-table-column
          label="操作"
          width="100"
      >
        <template #default="scope">
          <a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.seckillId)">修改</a>
          <a style="cursor: pointer; margin-right: 10px" @click="handleDel(scope.row.seckillId)">删除</a>
<!--          <a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.goodsId)">修改</a>-->
<!--          <a style="cursor: pointer; margin-right: 10px" v-if="scope.row.goodsSellStatus == 0" @click="handleStatus(scope.row.goodsId, 1)">下架</a>-->
<!--          <a style="cursor: pointer; margin-right: 10px" v-else @click="handleStatus(scope.row.goodsId, 0)">上架</a>-->
        </template>
      </el-table-column>
    </el-table>
    <!--总数超过一页，再展示分页器-->
    <el-pagination
        background
        layout="prev, pager, next"
        :total="state.total"
        :page-size="state.pageSize"
        :current-page="state.currentPage"
        @current-change="changePage"
    />
  </el-card>
  <DialogAddSecKill ref='addSecKill' :reload="getSecKillList" :type="state.type" />

</template>

<script setup>
import { Plus, Delete } from '@element-plus/icons-vue'
import axios from '@/utils/axios'
const app = getCurrentInstance()
const { goTop } = app.appContext.config.globalProperties
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import DialogAddSecKill from "@/components/DialogAddSecKill.vue";
import {ElMessage} from "element-plus";

const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  total: 0, // 总条数
  currentPage: 1, // 当前页
  pageSize: 10,  // 分页大小
  type: 'add', // 操作类型

})
const addSecKill = ref(null)

onMounted(() => {
  getSecKillList()
})

// 获取秒杀列表
const getSecKillList = () => {
  state.loading = true
  axios.get('/seckill/list', {
    params: {
      page: state.currentPage,
      limit: state.pageSize
    }
  }).then(res => {
    state.tableData = res.list
    state.total = res.totalCount
    state.currentPage = res.currPage
    state.loading = false
    goTop && goTop()
  })
}

// 添加
const handleAdd = () => {
  state.type = 'add'
  addSecKill.value.open()
}
// 修改
const handleEdit = (id) => {
  state.type = 'edit'
  addSecKill.value.open(id)
}

const changePage = (val) => {
  state.currentPage = val
  getSecKillList()
}

const handleDel = (id) => {
  axios.delete(`/seckill/${id}`).then(() => {
    ElMessage.success('删除成功')
    getSecKillList()
  })
}
</script>